<template>
<div>
    <el-table
    :data="tableData"
    style="width: 60%;margin:auto">
    <el-table-column
      prop="name"
      label="收件人"
      width="180">
    </el-table-column> 
     <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
       <el-table-column
      label="手机号码"
      width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.num }}</span>
      </template>
    </el-table-column>
    
     <el-table-column
      align="right">
      <template slot="header">
       <el-button  @click="dialogFormVisible = true">新增收货地址</el-button>
       
       </template>
      
      
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
      
    </el-table-column>
  </el-table>
     <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
<el-form-item label="收货人" label-width="100px">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-form-item>
<el-form-item label="收获地址" label-width="100px">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-form-item>
<el-form-item label="电话号码" label-width="100px">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
 
</div>  
</template>

<script>
  export default {
    data() {
      return {
        input: "",
        form: {
        
      },
           dialogFormVisible: false,
        tableData: [{
          num: '130222222222',
          name: '螺旋的科沦',
          address: '上海市普陀区金沙江路 1518 弄'
        }, ]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>